<template>
    <div style="height: 435px;overflow: auto;">
        <el-collapse v-model="activeNames" @change="handleChange">
            <!-- <el-collapse-item title="1、中压管网GIS图选择" name="1">
                <div class="demo-image__preview">
                    <el-image :src="domAddress + midNetGIS.selectedImage" alt="" style="width: 150px;height:150px;"
                        :preview-src-list="[domAddress + midNetGIS.selectedImage]"></el-image>
                </div>



                <select-alert-image-vue :surveyImage="midNetGIS.allImage" @message="getImage"></select-alert-image-vue>
            </el-collapse-item> -->
            <el-collapse-item title="1、实地实勘隐患图片————最多选取10条内容" name="2">
                <div style="display: flex; flex-wrap: wrap;">
                    <div style="width: 150px; text-align: center;margin-right: 20px;margin-top: 20px;"
                        v-for="(item, index) in otherDangerData" :key="index">
                        <div>
                            <el-checkbox v-model="item.isSelected" :label="item.title" border
                                @change="statusChange(item.isSelected, index)"></el-checkbox>
                        </div>
                        <div>描述:  {{ item.description }}</div>
                        <div class="demo-image__preview">
                    <el-image :src="domAddress + item.selectedImage" alt="" style="width: 150px;height:150px;"
                        :preview-src-list="[domAddress + item.selectedImage]"></el-image>
                </div>
                        <select-alert-image-vue :surveyImage="item.allImage" @message="getDangerImage"
                            :index="index"></select-alert-image-vue>
                    </div>
                </div>
            </el-collapse-item>

        </el-collapse>
    </div>
</template>
<script>
import ImageDialog from '../OtherOwerUseComponent/ImageDialog.vue';
import selectAlertImageVue from '../OtherOwerUseComponent/selectAlertImage.vue';

selectAlertImageVue
export default {
    props: ['surveyImage', 'information'],
    watch: {
        surveyImage: {
            handler(newData, oldData) {
                this.distrbuteImage(newData)
                
            },
        },
        information: {
            handler(newData, oldData) {
                for (let i = 0; i < this.otherDangerData.length; i++) {
                    this.otherDangerData[i].description = newData[this.otherDangerData[i].dictName]
                }
            },
        },
        ///实地勘察数据传值
        otherDangerData:{
            handler(newData,oldData){
  
                this.$emit('dangerArrayData',newData)
            },
            deep: true // 深度监听数组的变化
        },
        ///中压管网GIS图传值
        midNetGIS:{
            handler(newData,oldData){
                this.$emit('GISArrayData',newData)
            },
            deep: true // 深度监听数组的变化
        }
    },
    name: 'thridLevelAlert',
    data() {
        return {
            // midNetGIS: {
            //     allImage: [],
            //     selectedImage: '',
            // },
            otherDangerData: [
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/标志桩损坏',
                    dictName: 'damagedMarkerPosts',
                    title: '标志桩损坏',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/标志需要增加',
                    dictName: 'signNeedAdd',
                    title: '标志需要增加',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/套管生锈',
                    dictName: 'rustOnCasing',
                    title: '套管生锈',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/套管未封堵',
                    dictName: 'casingNotBlocked',
                    title: '套管未封堵',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/套管脱离地面',
                    dictName: 'bushingOffGround',
                    title: '套管脱离地面',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/盘管封埋地面',
                    dictName: 'coilOffGround',
                    title: '盘管封埋地面',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/盘管生锈',
                    dictName: 'coilBuryRust',
                    title: '盘管生锈',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/盘管损坏',
                    dictName: 'coilDamage',
                    title: '盘管损坏',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管沉降',
                    dictName: 'riserSettlement',
                    title: '立管沉降',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管占压',
                    dictName: 'riserOccupy',
                    title: '立管占压',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管支架损坏',
                    dictName: 'riserDamagedBracket',
                    title: '立管支架损坏',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管预留管生锈',
                    dictName: 'riserReservedPipeRust',
                    title: '立管预留管生锈',
                    description: '',
                    isSelected: false
                },
                {
                    allImage: [],
                    selectedImage: '',
                    address: '内低压管网/调压设施至有限空间(厨房、车间、锅炉)/立管生锈',
                    dictName: 'riserRust',
                    title: '立管生锈',
                    description: '',
                    isSelected: false
                },

            ],
            domAddress: 'http://192.168.10.233:86',
            activeNames: ['1']
        }
    },
    methods: {
        openVn() {
            const h = this.$createElement;
            this.$message({
                message: h('p', null, [
                    h('span', null, '最多选择'),
                    h('i', { style: 'color: teal' }, '10'),
                    h('span', null, '条'),
                ])
            });
        },
        statusChange(value, index) {
            const count = this.otherDangerData.filter(item => item.isSelected === true).length;
            if (count > 10) {
                this.otherDangerData[index].isSelected = false
                this.openVn()
            }

        },
        // getImage(message) {
        //     this.midNetGIS.selectedImage = message
        // },
        getDangerImage(message) {
            this.otherDangerData[message.index].selectedImage = message.data

        },
        distrbuteImage(newData) {
            // for (let i = 0; i < newData.length; i++) {
            //     if (newData[i].fileTreePath.indexOf('基本信息/管网图(GIS)资料/中压管网分布图') != -1) {
            //         this.midNetGIS.allImage = newData[i].fileList
            //         this.midNetGIS.selectedImage=newData[i].fileList[0]
            //     }
            // }
            for (let i = 0; i < this.otherDangerData.length; i++) {
                for (let n = 0; n < newData.length; n++) {
                    if (newData[n].fileTreePath.indexOf(this.otherDangerData[i].address) != -1) {
                        this.otherDangerData[i].allImage = newData[n].fileList
                        this.otherDangerData[i].selectedImage = newData[n].fileList[0]
                    }
                }
            }

        },

        handleChange(val) {
            console.log(val);
        }
    },
    components: {
        selectAlertImageVue,
        ImageDialog,

    }
}
</script>
<style></style>